<template>
  <div>
    <x-header :left-options="{ backText: '', preventGoBack: true }" title="申请续贷"
      @on-click-back="headerBackFun"></x-header>
    <div class="content">
      <div class="desc top">
        合同号：00001
      </div>
      <ul>
        <li>
          <div class="title">
            借据号1：A00001
          </div>
          <div class="text">
            <flexbox :gutter="0">
              <flexbox-item>
                <div class="flex-demo desc">结欠本金：</div>
              </flexbox-item>
              <flexbox-item>
                <div class="flex-demo">10,000.00 元</div>
              </flexbox-item>
              <flexbox-item>
                <div class="flex-demo desc">结欠利息：</div>
              </flexbox-item>
              <flexbox-item>
                <div class="flex-demo">1,000.00 元</div>
              </flexbox-item>
            </flexbox>
          </div>
        </li>
      </ul>
    </div>
    <div style="padding: 10px;margin: 2rem 0;">
      <x-button type="warn" action-type="button" @click.native="apply"> 立即申请</x-button>
    </div>
    <div class="desc" style="padding: 1rem;">
      <span class="title">
        温馨提示:
      </span>
      <br>
      续贷业务仅针对即将到期的贷款
    </div>
  </div>
</template>

<script>
  import Vue from "vue";
  import {
    Icon,
    Dialog
  } from "vant";
  export default {
    name: "apply",
    components: {},
    data() {
      return {

      };
    },
    mounted() {},
    methods: {
      apply() {
        this.$router.push("/refinance/submit")
      },
      headerBackFun() {
        history.back()
      },
    },
  };
</script>

<style scoped lang="less">
  .vux-header {
    background-color: #f4f4f4;

    /deep/.vux-header-left .left-arrow::before {
      border: 2px solid #1d2129 !important;
      border-width: 2px 0 0 2px !important;
    }

    /deep/.vux-header-title {
      color: #1d2129 !important;
    }

    .vux-header-right a {
      color: #1d2129;
    }
  }

  .content {
    .top {
      font-size: 1.2rem;
      margin-bottom: 1rem;
      padding: 0.5rem;
    }

    li {
      background-color: #fff;
      padding: 1.2rem;
      margin-bottom: 1.2rem;
      .title {
        padding: 0.5rem;
        font-size: 1.2rem;
      }

      .text {
        padding: 0.5rem;
      }
    }

  }

  .desc {
    color: #A3A2AA;

    .title {
      font-size: 1.2rem;
    }
  }
</style>

